<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正方体</title>
    <style>
        body{
            perspective: 1000px;
            /*perspective-origin:left top;*/
        }
        .box{
            width: 1200px;
            height: 1200px;
            /*border: 5px seagreen solid;*/
            margin: 100px auto;
            position: relative;
            transform-style: preserve-3d;
            animation: rotateAnim 3s linear infinite;
        }
        .layer{
            width: 400px;
            height: 400px;
            text-align: center ;
            line-height: 400px;
            position: absolute;
            transition: all 0.5s ease-in-out;
        }
        .box .layer:nth-child(1){
            /*background-color: #B0B0B0;*/
            background-image: url("img/正方体1.jpg");
            left: 400px;
            transform-origin: bottom;
            transform: rotateX(-90deg);
        }
        .box .layer:nth-child(2){
            /*background-color: #B0B0B0;*/
            background-image: url("img/正方体2.jpg");
            top: 400px;
            left: 800px;
            transform-origin: left;
            transform: rotateY(-90deg);
        }
        .box .layer:nth-child(3){
            /*background-color: #B0B0B0;*/
            background-image: url("img/正方体3.jpg");
            top: 800px;
            left: 400px;
            transform-origin: top;
            transform: rotateX(90deg);
        }
        .box .layer:nth-child(4){
            /*background-color: #B0B0B0;*/
            background-image: url("img/正方体4.jpg");
            top: 400px;
            transform-origin: right;
            transform: rotateY(90deg);
        }
        .box .layer:nth-child(5){
            /*background-color: #B0B0B0;*/
            background-image: url("img/正方体5.jpg");
            top: 400px;
            left: 400px;
        }
        .box .layer:nth-child(6){
            /*background-color: #B0B0B0;*/
            background-image: url("img/正方体6.jpg");
            top: 400px;
            left: 400px;
            transform: translateZ(400px);
        }
        .box:hover .layer{
            transform-origin: center center;
        }

        @keyframes rotateAnim {
            0%{transform: rotate3d(1,1,1,0);}
            100%{transform: rotate3d(1,1,1,360deg);}
        }
    </style>
</head>
<body>
<div class="box">
    <div class="layer">1</div>
    <div class="layer">2</div>
    <div class="layer">3</div>
    <div class="layer">4</div>
    <div class="layer">5</div>
    <div class="layer">6</div>
</div>
</body>
</html>